<template>
  <div style="background-color: wheat;height:100%;overflow:auto;">

<!--    当前时间-->
    <div style="position: relative;">
      <div style="position: absolute; left: 0;margin: 20px;color: black; font-size: 20px">
        {{dateFormat(this.currentTime)}}
      </div>
    </div>

<!--    滚动配置-->
    <div style="position: relative;">
      <div style="position: absolute; right: 0;">
        <el-button
          @click="configurationVisible = true"
          type="text" icon="el-icon-setting"
          style="margin: 25px;color: black;">配置</el-button>
      </div>
    </div>

<!--    <div style="position: relative;">-->
<!--      <div style="position: absolute; right: 0; top: 20px">-->
<!--        <i-->
<!--          @click="getList()"-->
<!--          class="el-icon-refresh"-->
<!--          style="margin: 25px;color: black;">刷新</i>-->
<!--      </div>-->
<!--    </div>-->


    <el-drawer
      size="350px"
      title="滚动配置"
      :visible.sync="configurationVisible"
      :with-header="false"
      :show-close="false">
      <div class="drawer-container">

        <div class="setting-drawer-title">
          <h3 class="drawer-title">滚动配置</h3>
        </div>

        <!--分割线-->
        <el-divider/>

        <div class="drawer-item">
          <span>开启鼠标悬停</span>
          <el-switch v-model="hoverStopEnabled" class="drawer-switch" />
        </div>

        <div class="drawer-item">
          <span>开启单步运动停止</span>
          <el-switch v-model="singleHeightEnabled" class="drawer-switch" :disabled="true"/>
        </div>

        <div class="drawer-item">
          <span>滚动速度</span>
          <div class="block">
            <el-slider :show-tooltip="false" v-model="scrollSpeed" :min="0.3" :max="2" :step="0.1" show-input/>
          </div>
        </div>

        <div class="drawer-item">
          <span>开启关键字加粗</span>
          <el-switch v-model="keyFontBoldEnabled" class="drawer-switch"/>
        </div>

        <div class="drawer-item">
          <span class="demonstration">选择关键字颜色</span>
          <el-color-picker v-model="font_color" class="drawer-switch" @change="fontColorChange" :predefine="predefineColor"/>
        </div>

        <div class="drawer-item">
          <span>表头字体大小</span>
          <div class="block">
            <el-slider :show-tooltip="false" v-model="title_table_font_size" :min="24" :max="40" :step="1" show-input/>
          </div>
        </div>

        <div class="drawer-item">
          <span>表内字体大小</span>
          <div class="block">
            <el-slider :show-tooltip="false" v-model="content_table_font_size" :min="22" :max="40" :step="1" show-input/>
          </div>
        </div>

        <!--分割线-->
        <br>
        <el-divider/>

        <div class="drawer-item">
          <el-button size="medium" type="primary" plain icon="el-icon-document-add" @click="saveScrollOption">保存配置</el-button>
          <el-button size="medium" plain icon="el-icon-refresh" @click="resetScrollOption">重置配置</el-button>
        </div>
      </div>
    </el-drawer>

    <div style="text-align:center;font-size: 50px;padding: 10px">
      <b>轧线工艺要点展示台</b>
    </div>

    <div style="width: 100%;padding: 0 10px 0 10px;">
      <table width="100%" :style="title_table_font">
        <tr>
          <th style="width: 20%">类别</th>
          <th style="width: 80%">工艺要点</th>
        </tr>
      </table>
    </div>

    <!--数据量少时不滚动，但是两个盒子之间有10px的间隙，加上margin-top: -10px后滚动给又会穿透，所以把滚动的div样式动态设置-->
    <div :style="this.scrollEnabled ? this.style_more : this.style_less" ref="scrollContainer">
      <vue-seamless-scroll :data="dashBoardList" :class-option="seamlessScrollOption"
                           class="warp" ref="seamlessScroll">
        <table width="100%" :style="content_table_font">
            <tr v-for="(row, index) in dashBoardList" :key="index">
              <td style="width: 20%;text-align: left;">
                <span :style="keyFontBoldEnabled ? tr_font_style+tr_font_color : tr_font_color">订单号：</span>{{ row.order_no }}<br>
                <span :style="keyFontBoldEnabled ? tr_font_style+tr_font_color : tr_font_color">区域：</span>{{ row.region_name }}<br>
                <span :style="keyFontBoldEnabled ? tr_font_style+tr_font_color : tr_font_color">钢种：</span>{{ row.steel_grade }}<br>
                <span :style="keyFontBoldEnabled ? tr_font_style+tr_font_color : tr_font_color">宽度：</span>{{ row.width_low }} - {{ row.width_hi }}<br>
                <span :style="keyFontBoldEnabled ? tr_font_style+tr_font_color : tr_font_color">厚度：</span>{{ row.thickness_low }} - {{ row.thickness_hi }}<br>
              </td>
              <td v-html="row.process ? row.process.replace(/\n/g, '<br>') : ''" style="width: 80%;text-align: left;"></td>
            </tr>
        </table>

<!--        滚动第二轮时会出现空白，在复制一份内容就不会了-->
<!--        <table width="100%">-->
<!--          <tr v-for="(row, index) in dashBoardList" :key="index">-->
<!--            <td style="width: 20%;text-align: left;">-->
<!--              订单号：{{ row.order_no }}<br>-->
<!--              区域：{{ row.region_name }}<br>-->
<!--              钢种：{{ row.steel_grade }}<br>-->
<!--              宽度：{{ row.width_low }} - {{ row.width_hi }}<br>-->
<!--              厚度：{{ row.thickness_l }} - {{ row.thickness_h }}<br>-->
<!--            </td>-->
<!--            <td v-html="row.process ? row.process.replace(/\n/g, '<br>') : ''" style="width: 80%;text-align: left;"></td>-->
<!--          </tr>-->
<!--        </table>-->
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import {listDashBoard} from "@/api/showcase/showcase_2050/dashBoard";

import 'element-ui/lib/theme-chalk/index.css';
import moment from "moment/moment";

export default {
  name: 'largeScreen-fullscreen',
  components: { vueSeamlessScroll },
  data () {
    return {
      // 总条数
      total: 0,
      // 工艺要点管理 表格数据
      dashBoardList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        currentUser: sessionStorage.getItem("currentUser"),
      },

      //数据量少时不滚动，但是两个盒子之间有10px的间隙，加上margin-top: -10px后滚动给又会穿透，所以把滚动的div样式动态设置
      style_less: "height: 100%;width: 100%;margin-top: -10px",
      style_more: "height: 100%;width: 100%;",

      // 查询定时器
      refreshDataInterval: null,

      //时间刷新定时器
      refreshTimeInterval: null,

      //配置弹窗
      configurationVisible: false,

      //是否滚动
      scrollEnabled: false,

      // 单步运动停止的高度
      singleHeight: this.singleHeightEnabled ? this.singleHeight : 0,
      //行高
      trHeights: [],
      //是否开始单步运动
      singleHeightEnabled: localStorage.getItem('singleHeightEnabled') !== null ? JSON.parse(localStorage.getItem('singleHeightEnabled')) : false, //初加载为false
      //滚动速度
      scrollSpeed: localStorage.getItem('scrollSpeed') !== null ? JSON.parse(localStorage.getItem('scrollSpeed')) : 0.3, //初加载滚动速度为0.3
      //是否开启鼠标悬停
      hoverStopEnabled: localStorage.getItem('hoverStopEnabled') !== null ? JSON.parse(localStorage.getItem('hoverStopEnabled')) : true, //初加载为true
      //是否开启关键字加粗
      keyFontBoldEnabled: localStorage.getItem('keyFontBoldEnabled') !== null ? JSON.parse(localStorage.getItem('keyFontBoldEnabled')) : true, //默认加粗

      //当前时间
      currentTime: new Date(),

      //关键字样式
      tr_font_style: "font-weight: bold;",
      //关键字颜色
      predefineColor: ["#409EFF","#1890FF","#F5222D","#D00AEB","#17EB5E"], //预设颜色
      font_color: localStorage.getItem('font_color') !== null ? JSON.parse(localStorage.getItem('font_color')) : "#000000",
      tr_font_color: localStorage.getItem('tr_font_color') !== null ? JSON.parse(localStorage.getItem('tr_font_color')) : "color: #000000",

      exFlag: 0,


      //表头字体
      //title_table_font: "font-size: 24px;",
      title_table_font_size: localStorage.getItem('title_table_font_size') !== null ? JSON.parse(localStorage.getItem('title_table_font_size')) : 24,
      //表格内容字体
      //content_table_font: "font-size: 22px;",
      content_table_font_size: localStorage.getItem('content_table_font_size') !== null ? JSON.parse(localStorage.getItem('content_table_font_size')) : 22,


    }
  },
  computed: {
    seamlessScrollOption() {
      return {
        step: this.scrollSpeed, // 数值越大速度滚动越快，但不能太小，太小会卡顿
        limitMoveNum: this.scrollEnabled ? 0 : 9999, // 开始无缝滚动的数据量，当数据量大于3时，启动滚动
        hoverStop: this.hoverStopEnabled, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
        ScrollEnd: () => { //滚动结束后的回调函数
          console.log("ScrollEnd")
        }
      };
    },

    //动态表头字体
    title_table_font() {
      return `font-size: ${this.title_table_font_size}px;`;
    },
    //动态表内字体
    content_table_font() {
      return `font-size: ${this.content_table_font_size}px;`;
    }
  },
  watch: {
    dashBoardList: {
      handler(newValue) {
        this.$nextTick(() => {

          this.checkContentHeight();
          // this.getList();
          this.measureRowHeights();

        });
      },
      // deep: true, // 深度监听数组内的变化
      // immediate: true // 立即以当前值触发handler
    },

  },
  created() {
    this.getList();
    this.refreshDataInterval = setInterval(this.getList, 10000); //设置查询定时器，10s刷新一次，动态刷新滚动数据

    // 每秒更新一次时间
    this.updateTime();
    this.refreshTimeInterval = setInterval(this.updateTime, 1000); //设置时间定时器，1s刷新一次，动态获取当前时间


  },

  mounted() {
    this.$nextTick(() => {
      // this.checkContentHeight();
      // this.measureRowHeights();
    });
  },


  beforeDestroy() {
    // 清除查询定时器
    if (this.refreshDataInterval) {
      clearInterval(this.refreshDataInterval);
    }

    // 清除时间刷新定时器
    if (this.refreshTimeInterval) {
      clearInterval(this.refreshTimeInterval);
    }

    // 清除事件监听器以防止内存泄漏
    window.removeEventListener('resize', this.onResize);
  },

  methods: {
    /** 查询展示台 列表 */
    getList() {
      listDashBoard(this.queryParams).then(response => {
        this.dashBoardList = response.rows;
        this.total = response.total;
      });
    },

    measureRowHeights() {
      const rows = this.$el.querySelectorAll('tr');
      // Array.from(rows).forEach((row, index) => {
      //   this.trHeight = row.offsetHeight+10; //数据量少时不滚动，但是两个盒子之间有10px的间隙
      //   // console.log(this.trHeight);
      // });
      this.trHeights = Array.from(rows, row => row.offsetHeight);
      // console.log(this.trHeights);
      if (this.trHeights.length > 0 && this.exFlag === 0) {
        this.exFlag = 1;
        this.trHeights[0] = this.trHeights[0] + 10;
        this.getSingleHeight(this.trHeights)
        // this.trHeights.forEach(row => {
        //   console.log(row);
        // })
      }
    },

    getSingleHeight(trHeights){
      trHeights.forEach(row => {
        // console.log(row);
        this.singleHeight = row;
        this.$refs.seamlessScroll.$forceUpdate();
      })
    },

    updateSeamlessScrollOptions(shouldScroll) {
      // 更新无缝滚动的配置项，根据 shouldScroll 的值
      // 注意：这里的实现依赖于 vue-seamless-scroll 组件的具体 API 和行为
      // 你可能需要查阅其文档以了解如何动态更新配置
      // 这里只是一个假设性的实现
      this.$nextTick(() => {
        this.classOption = Object.assign({}, this.seamlessScrollOption(), {
          // shouldScroll: shouldScroll,
          // 可能还需要添加其他逻辑来启动或停止滚动
        });
      });
    },


    checkContentHeight(){
      // 获取容器和内容的高度
      const container = this.$refs.scrollContainer;
      const scrollContent = this.$refs.seamlessScroll.$el;

      if (container && scrollContent) {
        const containerHeight = container.offsetHeight;
        const contentHeight = scrollContent.offsetHeight;

        // 判断内容高度是否超过了容器高度，超出就滚动
        this.scrollEnabled = contentHeight > containerHeight;

      } else {
        console.log("这是null")
      }

    },




    onResize() {
      this.measureRowHeights();
      // console.log("onResize")
      this.checkContentHeight();
    },

    // updateScrollSettings(newSettings) {
    //   Object.assign(this.$data, newSettings);
    // },


    // 在日期格式中，月份是从0开始的
    // 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
    // 时间格式化
    dateFormat (date) {
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      let week = date.getDay() // 星期
      let weekArr = [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ]
      // 拼接 时间格式处理
      return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]

      // var datefomat = moment(date).format('YYYY-MM-DD HH:mm:ss')
      // return datefomat + ' ' + weekArr[week]
    },
    //动态更新时间
    updateTime() {
      this.currentTime = new Date();
    },

    //颜色设置
    fontColorChange(val){
      this.tr_font_color = "color: "+ val;
    },


    //保存滚动配置
    saveScrollOption(){
      localStorage.setItem('scrollSpeed', JSON.stringify(this.scrollSpeed)); // 保存为字符串形式的数值
      this.scrollSpeed = JSON.parse(localStorage.getItem('scrollSpeed')); // 保存为字符串形式的数值

      localStorage.setItem('hoverStopEnabled', JSON.stringify(this.hoverStopEnabled)); // 保存为字符串形式的布尔值
      this.hoverStopEnabled = JSON.parse(localStorage.getItem('hoverStopEnabled'));

      localStorage.setItem('singleHeightEnabled', JSON.stringify(this.singleHeightEnabled));
      this.singleHeightEnabled = JSON.parse(localStorage.getItem('singleHeightEnabled'));

      localStorage.setItem('keyFontBoldEnabled', JSON.stringify(this.keyFontBoldEnabled));
      this.keyFontBoldEnabled = JSON.parse(localStorage.getItem('keyFontBoldEnabled'));

      localStorage.setItem('tr_font_color', JSON.stringify(this.tr_font_color));
      this.tr_font_color = JSON.parse(localStorage.getItem('tr_font_color'));

      localStorage.setItem('font_color', JSON.stringify(this.font_color));
      this.font_color = JSON.parse(localStorage.getItem('font_color'));

      localStorage.setItem('title_table_font_size', JSON.stringify(this.title_table_font_size));
      this.title_table_font_size = JSON.parse(localStorage.getItem('title_table_font_size'));

      localStorage.setItem('content_table_font_size', JSON.stringify(this.content_table_font_size));
      this.content_table_font_size = JSON.parse(localStorage.getItem('content_table_font_size'));

      this.configurationVisible = false;
    },
    //重置滚动配置
    resetScrollOption() {
      localStorage.removeItem('scrollSpeed');
      localStorage.removeItem('hoverStopEnabled');
      localStorage.removeItem('singleHeightEnabled');
      localStorage.removeItem('keyFontBoldEnabled');
      localStorage.removeItem('tr_font_color');
      localStorage.removeItem('font_color');
      localStorage.removeItem('title_table_font_size');
      localStorage.removeItem('content_table_font_size');

      this.scrollSpeed = 0.3;
      this.hoverStopEnabled = true;
      this.singleHeightEnabled = false;
      this.keyFontBoldEnabled = true;
      this.tr_font_color = "color: #000000";
      this.font_color = "#000000";
      this.title_table_font_size = 24;
      this.content_table_font_size = 22;

      this.configurationVisible = false;
    },
  }
}
</script>

<style lang="scss" scoped>
/** 滚动第二轮时会出现空白，清除边距就好 */
*{
  margin: 0;
  padding: 0;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 20px;
}

th {
  font-weight: bold;
  text-align: center;
}

td {
  vertical-align: middle;
  text-align: left;
}

.warp {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 10px;
  background-color: wheat;
}

.drawer-container {
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;

  .drawer-title {
    margin-bottom: 12px;
    color: rgba(0, 0, 0, .85);
    font-size: 22px;
    line-height: 22px;
  }

  .drawer-item {
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    padding: 12px 0;
  }

  .drawer-switch {
    float: right
  }
}

::v-deep .seamless-warp > div > :nth-child(2) {
  display: none !important;
}

</style>
